import Base from '../base.js'
import moviesApi from "../../api/movies"

export default class extends Base {
    constructor(prop) {
        super(prop);
        this.data._id = prop._id
    }
    data = {
        _id: "",
        cname: {},
        images: []
    }
    render() {
        this.$el.html(`
            <h1 style="text-align:center">上传电影相关图片</h1>
            <form class="layui-form"  lay-filter="formTest">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px">电影名:</label>
                    <span class="name" style="display:inline-block; padding-top:9px"></span>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px;">相关海报图片</label>
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传海报图片
                    </button>  
                </div>
                <div class="postImg-box" style="margin:30px 30px;padding:10px;border:3px dashed #999999">这里是海报图片</div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px">相关人物图片</label>
                    <button type="button" class="layui-btn" id="test2">
                        <i class="layui-icon">&#xe67c;</i>上传相关人物图片
                    </button>
                </div>
                <div class="headImg-box" style="margin:30px 30px;padding:10px;border:3px dashed #999999">这里是相关人物图片</div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px">相关剧集图片</label>
                    <button type="button" class="layui-btn" id="test3">
                        <i class="layui-icon">&#xe67c;</i>上传剧集图片
                    </button>
                </div>
                <div class="setsImg-box" style="margin:30px 30px;padding:10px;border:3px dashed #999999">这里是剧集图片</div>
            </form>
        `)
        this.name = $(".name");
        this.postBtn = $("#test1")
        this.headBtn = $("#test2")
        this.setsBtn = $("#test3")
        this.postImgBox = $(".postImg-box")
        this.headImgBox = $(".headImg-box")
        this.setsImgBox = $(".setsImg-box")
    }
    rerender() {
        // console.log(this.data.movies);
        const { cname, posterImg, headImg, setImg } = this.data.movies
        this.name.html(cname)
        // console.log(poster);
        this.postImgBox.html(`
            ${_.map(posterImg, item => {
            return `
                    <img width="100px" src="http://localhost:3002${item}" />
                `
        })}
        `)
        this.headImgBox.html(`
            ${_.map(headImg, item => {
            return `
                    <img width="100px" src="http://localhost:3002${item}" />
                `
        })}
        `)
        this.setsImgBox.html(`
            ${_.map(setImg, item => {
            return `
                    <img width="100px" src="http://localhost:3002${item}" />
                `
        })}
        `)
    }
    async getOne() {
        // console.log(this.data);
        this.data.movies = await moviesApi.getOne(this.data._id);
        // console.log(this.data.postImg);
        this.rerender()
    }
    mounted() {
        this.getOne();
    }

    async deletePostImg(e) {       
        e = e || e.event;
       const url = e.target.src.replace("http://localhost:3002", "")
        // console.log(this.data._id);
        const { _id } = this.data
        const type="PostImg"
        // console.log({ _id });
        layer.open({
            content: '是否删除该图片'
            , btn: ['确定', '取消']
            , yes: async (index, layero) => {
                //按钮【按钮一】的回调
                console.log(url, _id);
                this.data.movies = await moviesApi.deleteImgs({ _id, url },type)

                this.rerender()
                layer.close(index)
            }
            , cancel: function () {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }
    async deleteHeadImg(e) {
        
        e = e || e.event;
       const url = e.target.src.replace("http://localhost:3002", "")
        // console.log(this.data._id);
        const { _id } = this.data
        // console.log({ _id });
        const type="HeadImg"
        layer.open({
            content: '是否删除该图片'
            , btn: ['确定', '取消']
            , yes: async (index, layero) => {
                //按钮【按钮一】的回调
                console.log(url, _id);
                // this.data.movies = await moviesApi.deleteHeadImg({ _id, url })
                this.data.movies = await moviesApi.deleteImgs({ _id, url },type)
                this.rerender()
                layer.close(index)
            }
            , cancel: function () {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }
    async deleteSetsImg(e) {       
        e = e || e.event;
       const url = e.target.src.replace("http://localhost:3002", "")
        // console.log(this.data._id);
        const { _id } = this.data
        // console.log({ _id });
        const type="SetsImg"
        layer.open({
            content: '是否删除该图片'
            , btn: ['确定', '取消']
            , yes: async (index, layero) => {
                //按钮【按钮一】的回调
                console.log(url, _id);
                this.data.movies = await moviesApi.deleteImgs({ _id, url },type)
                this.rerender()
                layer.close(index)
            }
            , cancel: function () {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
        // console.log(e.target.src.rep("http://localhost:3002"));
        // console.log(1);
    }
    handle() {
        var upload = layui.upload;
        upload.render(
            {
            elem: '#test1' //绑定元素
            , url: '/resource/movies/addPostImgs' //上传接口
            , multiple: true
            , data: {
                _id: () => {
                    // console.log(this.data);
                    return this.data._id;
                },
            }, done: (res) => {
                //上传完毕回调
                // console.log(res);
                this.data.movies = res               
                this.rerender()
            }
            , error: function () {
                //请求异常回调
            }
        },
        );
        upload.render(
            {
                elem: '#test2' //绑定元素
                , url: '/resource/movies/addHeadImgs' //上传接口
                , multiple: true
                , data: {
                    _id: () => {
                        // console.log(this.data);
                        return this.data._id;
                    }
                }, done: (res) => {
                    //上传完毕回调
                    // console.log(this.data);
                    this.data.movies = res
                    this.rerender()
                }
                , error: function () {
                    //请求异常回调
                }
            },
            );
        upload.render(
        {
            elem: '#test3' //绑定元素
            , url: '/resource/movies/addSetImgs' //上传接口
            , multiple: true
            , data: {
                _id: () => {
                    // console.log(this.data);
                    return this.data._id;
                }
            }, done: (res) => {
                //上传完毕回调
                // console.log(this.data);
                this.data.movies = res
                this.rerender()
            }
            , error: function () {
                //请求异常回调
            }
        },
        );
        //海报
        this.postImgBox.on("click", "img", e => {
            e.target.style.border="3px solid rgb(0,150,136)"
            this.deletePostImg(e)
        })
        // 头像
        this.headImgBox.on("click", "img", e => {
            e.target.style.border="3px solid rgb(0,150,136)"
            this.deleteHeadImg(e)
        })
        //剧情
        this.setsImgBox.on("click", "img", e => {
            e.target.style.border="3px solid rgb(0,150,136)"
            this.deleteSetsImg(e)
        })
    }
}